<template>
  <div class="mapbj">
    <img src="@/assets/img/home/dongtou.png" usemap="#Map" border="0" style="width: 56rem; height: 37.4375rem;" />
    <map name="Map" id="Map">
      <!-- 灵昆街道 -->
      <div class="lingkong map_icon" @click="switchMaptwo(1, '灵昆街道','330305002000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="252,229,265,210,285,188,304,156,300,126,278,111,230,101,194,84,158,78,113,66,59,67,14,74,10,90,37,124,84,140,125,156,149,176,193,201,227,230" />
      </div>
      <!-- 北岙街道 -->
      <div class="beidai map_icon" @click="switchMaptwo(2, '北岙街道','330305001000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="683,304,662,321,636,333,616,345,586,351,580,361,530,391,529,409,526,438,522,451,547,456,575,449,616,434,642,431,650,416,660,403,680,391,694,377,701,373,701,373,708,376,717,374,730,382,742,385,777,389,812,392,838,400,882,405,888,400,873,381,830,355,755,322,722,298"
        />
      </div>
      <!-- 东屏街道 -->
      <div class="dongping map_icon" @click="switchMaptwo(3, '东屏街道','330305003000')">
        <p class="font_w4 font_s20 ">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="520,467,501,479,483,503,489,528,532,545,611,577,644,578,697,590,728,585,684,539,670,470,683,454,724,439,742,428,777,444,810,440,832,416,809,409,737,415,716,407,716,387,713,378,698,377,676,396,660,410,652,425,639,437,578,450,539,461,525,464"
        />
      </div>
      <!-- 元觉街道 -->
      <div class="yuanjue map_icon" @click="switchMaptwo(4, '元觉街道','330305004000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>

        <area
          shape="poly"
          coords="605,195,579,199,557,220,552,234,587,264,577,276,555,300,551,317,576,326,610,307,638,307,647,289,654,277,663,265,652,250,658,245,668,242,672,232,647,233,634,239,621,241"
        />
      </div>
      <!-- 霓屿街道 -->
      <div class="niyu map_icon" @click="switchMaptwo(5, '霓屿街道','330305005000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="393,403,378,394,366,352,384,334,405,308,433,300,438,307,475,331,506,323,536,312,536,326,503,346,476,368,460,367,435,352,408,355" />
      </div>
      <!-- 大门镇 -->
      <div class="damen map_icon" @click="switchMaptwo(6, '大门镇','330305101000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="414,51,454,24,486,4,530,16,534,32,612,61,645,92,659,120,650,161,637,200,627,213,621,210,620,199,598,151,578,158,527,160,488,148,447,143,426,119,423,111"
        />
      </div>
      <!-- 鹿西乡 -->
      <div class="luxi map_icon" @click="switchMaptwo(7, '鹿西乡','330305202000')">
        <p class=" font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="716,126,690,80,686,40,733,21,800,17,863,40,866,101,863,172,835,213" />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapDongTou',

  data () {
    return {
      qxname: '洞头区',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330305000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapbj {
  position: absolute;
  top: 9.5%;
  left: 19%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}

.lingkong {
  position: absolute;
  top: 7%;
  left: 15%;
}
.beidai {
  position: absolute;
  top: 47%;
  left: 65%;
}
.dongping {
  position: absolute;
  top: 74%;
  left: 64%;
}
.yuanjue {
  position: absolute;
  top: 25%;
  left: 63%;
}
.niyu {
  position: absolute;
  top: 36%;
  left: 42%;
}
.damen {
  position: absolute;
  top: 2%;
  left: 49%;
}
.luxi {
  position: absolute;
  top: 0%;
  left: 76%;
}
</style>
